<template>
  <div class="meunTop">
    <div
      class="meunBtn"
      :class="meunBtnkey2 === item.id ? 'act' : ''"
      v-for="item in list"
      @click="changemeun(item)"
      :key="item.id"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: "meunTop",
  data() {
    return {
      meunBtnkey2: this.meunBtnkey,
    };
  },
  props: {
    list: {
      type: Array,
    },
    meunBtnkey: {
      type: String,
      default: "",
    },
  },
  mounted() {},
  methods: {
    changemeun(item) {
      this.meunBtnkey2 = item.id;
      this.$emit("change", item);
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.meunTop {
  // width: 750px;
  width: 100%;
  // display: flex;
  // justify-content: space-between;

  height: 32px;

  .meunBtn {
    float: left;
    margin-left: 10px;
    transition: 0.4s all;
    color: #333;
    font-size: 16px;
    line-height: 30px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
  }

  .act {
    border: 1px solid rgb(21, 107, 246);
    color: rgb(21, 107, 246);
  }

  .meunBtn:hover {
    color: rgb(21, 107, 246);
  }
}
</style>
